<!DOCTYPE html>
<html lang="en" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="modal modal-blur fade" id="articleDetail" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document" th:fragment="article">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="card">
                    <div class="card-body">
                        <div class="row align-items-center mb-2">
                            <div class="col">
                                <div class="h2 m-0 font-weight-normal">[[${article.id}]]&nbsp;:&nbsp;[[${article.title}]]</div>
                            </div>
                        </div>
                        <div class="d-flex align-items-center pt-5 mt-auto text-muted">
                            <div>
                                <i class="fe fe-calendar"></i>
                                [[${#dates.format(article.createTime, 'yyyy-MM-dd HH:mm:ss')}]]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            </div>
                            <div>
                                <i class="fe fe-eye"></i>
                                [[${article.viewCount}]]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            </div>
                            <div>
                                <i class="fe fe-thumbs-up"></i>
                                [[${article.thumbUpCount}]]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            </div>
                            <div>
                                <i class="fe fe-star"></i>
                                [[${article.collectCount}]]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="markdown" th:utext="${article.html}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>